<template>
  <div>
    <predictChart />
    <!-- <manualMeter
      groupCode="MICH_0003"
      :showYearMonth="true"
      :showDailyTotal="true"
      :showDailyAverage="true"
      :showMonthlyTotal="true"
      exportFileName="燃气消耗报表"
      :isDate="true"
    /> -->
    <div style="overflow: hidden; border-radius: 4px">
      <div class="op-btns" style="padding-bottom: 0">
        <px-form ref="queryRef" class="custom-form-ui" :model="queryParams" inline label-width="90px">
          <px-form-item label="月份" prop="month">
            <px-date-picker v-model="queryParams.month" type="month" placeholder="请选择月份" format="YYYY-MM" value-format="YYYY-MM" />
          </px-form-item>

          <px-form-item class="option-item">
            <px-button type="primary" @click="searchAction">查询</px-button>
            <px-button type="primary" plain @click="exportAction">导出</px-button>
            <!-- <px-button @click="resetQuery">重置</px-button> -->
          </px-form-item>
        </px-form>
      </div>
      <div style="position: relative; height: calc(100vh - 200px); padding: 16px; overflow-y: hidden; background: #fff">
        <!-- <px-button type="primary" plain style="margin-bottom: 10px" @click="addLineAction">新增一行</px-button> -->
        <!-- <px-button type="primary" style="float: right; margin-bottom: 10px" @click="submitAction">提交</px-button> -->
        <!-- <px-button type="danger" plain style="margin-bottom: 10px" @click="deleteLineAction">删除一行</px-button> -->
        <iframe id="reportFrame" :src="templateUrl" width="100%" height="100%" frameborder="0" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import manualMeter from "@/views/common/components/manualMeter/index.vue";
import { onMounted, reactive, toRefs, ref, computed, nextTick } from "vue";
import { PxMessage, PxMessageBox } from "px-ui";
import { useRouter, useRoute } from "vue-router";
import { useNav } from "@/layout/hooks/useNav";
import dayjs from "dayjs";
import predictChart from "./components/predict.vue";

defineOptions({
  name: "MACHINE_SUPPLY_GAS"
});

const { username } = useNav();
const router = useRouter();
const route = useRoute();

const templateUrl = ref();

const queryParams = reactive({
  month: dayjs().format("YYYY-MM")
});
const addLineAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().clickAddLineButton", "*");
};
const deleteLineAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().clickDeleteLineButton", "*");
};

const submitAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().verifyAndWriteReport()", "*");
};
// importExcel_Clean清空导入
// importExcel_Append 增量导入
// importExcel_Cover 覆盖导入
const importAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().importExcel_Cover()", "*");
};
const exportAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage("_g().exportReportToExcel('simple')", "*");
};

const printAction = () => {
  document.getElementById("reportFrame").contentWindow.postMessage(`_g().noClientPrint(true,true)`, "*");
};
const { VITE_FANRUAN_BASE_URL } = import.meta.env;
const getUrl = () => {
  let tpName = encodeURIComponent(encodeURIComponent("reportCenter/machine/燃气消耗报表.cpt"));
  let baseUrl = `${window.location.protocol}//${window.location.hostname}:8443/webroot/decision/view/report?viewlet=${tpName}&user=${username.value}&__pi__=false&op=write&facCode=${localStorage.getItem("facCode") || ""}&ts=${new Date().getTime()}`;
  if (queryParams.month) {
    let firstDayOfMonth = dayjs(queryParams.month).startOf("month").format("YYYY-MM-DD");
    let lastDayOfMonth = dayjs(queryParams.month).endOf("month").format("YYYY-MM-DD");
    baseUrl = `${baseUrl}&startDate=${firstDayOfMonth}&endDate=${lastDayOfMonth}`;
  }
  templateUrl.value = baseUrl;
};
onMounted(() => {
  // let ym = new Date();
  // if (route.query.date) {
  //   ym = new Date(route.query.date);
  // }
  // // 获取当前月份第一天
  // const firstDayOfMonth = dayjs(new Date(ym.getFullYear(), ym.getMonth(), 1)).format("YYYY-MM-DD");
  // // 获取当前月份最后一天
  // const lastDayOfMonth = dayjs(new Date(ym.getFullYear(), ym.getMonth() + 1, 0)).format("YYYY-MM-DD");
  // queryParams.timeRange = [firstDayOfMonth, lastDayOfMonth];
  getUrl();
});

const searchAction = () => {
  getUrl();
};
</script>
<style scoped lang="scss">
.custom-form-ui {
  height: 38px;

  .px-form-item {
    margin-bottom: 0;
  }
}

.op-btns {
  display: flex;
  padding: 16px;
  // margin: 5px 0;
  background-color: #fff;
  // box-shadow: 0 0 10px 0 rgb(0 0 0 / 10%);

  .left {
    flex: 1;
    text-align: left;
  }

  .center {
    flex: 1;
    text-align: center;
  }

  .right {
    flex: 1;
    text-align: right;
  }
}

.footer-btns {
  text-align: right;
}
</style>
